<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>在线点餐系统 - 菜单</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <!-- 导航栏 -->
    <div style="width:100%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.05);padding:16px 0 8px 0;display:flex;justify-content:flex-end;align-items:center;position:sticky;top:0;z-index:10;">
        <a href="/admin/stock-warning" class="order-btn" style="margin-right:20px;width:auto;padding:6px 18px;background:#ff9800;">后台管理</a>
        <a href="/orders" class="order-btn" style="margin-right:20px;width:auto;padding:6px 18px;">查看订单</a>
        <a href="/cart" class="order-btn" style="margin-right:40px;width:auto;padding:6px 18px;background:#2196F3;">购物车</a>
        <a href="/logout" class="order-btn" style="margin-right:40px;width:auto;padding:6px 18px;background:#e44d26;">退出登录</a>
    </div>
    <div class="container">
        <h1>菜单</h1>
        <!-- 分类筛选 -->
        <form method="get" action="/dishes" style="margin-bottom:20px;text-align:center;">
            <label for="category">分类：</label>
            <select name="category" id="category" onchange="this.form.submit()" style="padding:6px 12px;">
                <option value="">全部</option>
                <c:forEach items="${categories}" var="cat">
                    <option value="${cat}" ${cat == selectedCategory ? 'selected' : ''}>${cat}</option>
                </c:forEach>
            </select>
        </form>
        <!-- 轮播图 -->
        <div class="carousel" id="carousel" style="width:100%;max-width:600px;margin:0 auto 30px auto;">
            <img id="carousel-img" src="/images/banner1.jpg" style="width:100%;height:240px;object-fit:cover;border-radius:8px;">
        </div>
        <script>
            // 简单图片轮播
            var imgs = ["/images/banner1.jpg", "/images/banner2.jpg", "/images/banner3.jpg"];
            var idx = 0;
            setInterval(function(){
                idx = (idx+1)%imgs.length;
                document.getElementById('carousel-img').src = imgs[idx];
            }, 3000);
        </script>
        <div class="menu-grid">
            <c:forEach items="${dishes}" var="dish">
                <div class="dish-card">
                    <img src="${dish.imageUrl}" alt="${dish.name}" class="dish-image">
                    <h3>${dish.name}</h3>
                    <p class="price">￥${dish.price}</p>
                    <p class="description">${dish.description}</p>
                    <form action="/cart/add" method="post" onsubmit="return validateCartForm(this);">
                        <input type="hidden" name="dishId" value="${dish.id}">
                        <div class="form-group">
                            <label for="quantity_${dish.id}">数量：</label>
                            <input type="number" id="quantity_${dish.id}" name="quantity" min="1" value="1" required>
                        </div>
                        <button type="submit" class="order-btn">加入购物车</button>
                    </form>
                </div>
            </c:forEach>
        </div>
    </div>
    <script src="/js/validation.js"></script>
    <script>
    function validateCartForm(form) {
        var quantity = form.querySelector('input[name="quantity"]').value;
        if (isNaN(quantity) || quantity < 1) {
            alert("请输入有效的数量！");
            return false;
        }
        return true;
    }
    </script>
</body>
</html> 